<template>
  <div class="body">
    <div class="container">
      <div class="left">
        <div class="top">
          在线人数
          <Icon type="ios-at-outline"/>
          <span>3r</span>
        </div>
      </div>
      <div class="right">
        <div class="top">
          西🍐网管
        </div>
        <div class="chat"></div>
        <div class="bottom">
          <Space direction="vertical" size="large" type="flex"  >

            <Input v-model="text"  :search="true" enter-button="发送" @click="sendMessage" placeholder="Enter something..."/>
          </Space>
        </div>
      </div>
    </div>
    <div class="choose" v-if="isshow">

        <Carousel v-model="value" loop class="Carousel">
        <CarouselItem v-for="(item, i) in img" :key="i" >
            <div class="img"> <img :src="item.url" alt=""></div>
        </CarouselItem>

    </Carousel>


      <div class="des">
        <Button type="primary" shape="circle" @click="choose">选择角色</Button>
      </div>

    </div>

  </div>
</template>

<script>
import io from 'socket.io-client';

// var ws = new WebSocket('ws://spirit.free.idcfengye.com/chat');

 var ws = new WebSocket('ws://localhost:80/chat/123');
export default {
  name: "chat1",
  data() {
    return {
      messages: [],
      text:"",
      isshow:true,
      img:[
        {
          url:require("/public/1.jpg"),
          name:"精神小伙"
        },
           {
          url:require("/public/2.jpeg"),
          name:"当代女大学生"
        },
           {
          url:require("/public/3.jpg"),
          name:"屌丝青年"
        }
      ],
      value:null
    };
  },
  mounted() { // 或者使用mounted钩子函数
    //开启webstocket服务的ip地址  ws:// + ip地址 + 访问路径

// 获取连接状态

//监听是否连接成功
        ws.onopen = function () {
            console.log('ws连接状态：' + ws.readyState)
          if(ws.readyState==1){


             this.$message['info']({
                    background: true,
                    content: '欢迎进入西里网管内部讨论群'
                });

          }
            //连接成功则发送一个数据
            //ws.send('我们建立连接啦');
        }
// 接听服务器发回的信息并处理展示
        ws.onmessage = function (data) {

            var res =JSON.parse(data.data);
            if(res.type==0){
              this.$message['success']({
                background:true,
                content:"进入聊天室"
              })
            }
            //接收到 消息后给后端发送的 确认收到消息，后端接收到后 不再重复发消息
           // ws.send('已接收到消息');
            //完成通信后关闭WebSocket连接
            // ws.close();
        }
// 监听连接关闭事件
        ws.onclose = function () {
            // 监听整个过程中websocket的状态
            console.log('ws连接状态：' + ws.readyState);
             ws.close();

        }
// 监听并处理error事件
        ws.onerror = function (error) {
            console.log(error);
        }


  },
  methods: {
    sendMessage(){
      if (this.text.trim() !== '') {
        // 将消息发送到服务器
       ws.send(this.text);
        this.text = '';
      }
    },
   handleSearch(){
   console.log(this.text)
    },
    choose(){
      console.log(this.value)
    }

  },
};

</script>

<style scoped lang="less">
.body {
  position: relative;
  z-index: 1;
  .choose{
    border-radius: 10px;
    .Carousel{
      margin:10px auto;
    }
    .img{
      width: 200px;
      height: 300px;
      margin: auto;
      img{
        width: 100%;
        height: 100%;

      }
    }
    z-index: 10;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%) ;

    background-color: rgba(255,255,255,.8);
    position: absolute;
    width: 400px;
    height: 400px;
  }
  color: #fff;
  font-weight: 900;
  letter-spacing: 2px;
  width: 100%;
  height: 100%;
  background-image: url("/public/5.gif");
  background-size: 50%;
  display: flex;
  align-items: center;

  .container {
    z-index: 1;
    border: solid 1px #2c3e50;
    width: 90%;
    height: 95%;
    margin: auto;

    display: flex;
    justify-content: center;

    .left {
      width: 20%;
      height: 100%;
      background-color: rgba(0, 0, 0, .5);

      .top {
        height: 30px;
        border-bottom: solid 1px #2c3e50;
        border-right: solid 1px #2c3e50;
        color: #fff;
        line-height: 30px;
        font-weight: bolder;
      }
    }

    .right {
      flex: 1;
      background-color: transparent !important;
      display: flex;
      flex-direction: column;

      .top {
        height: 70px;
        background-color: rgba(0, 0, 0, .5);
        width: 100%;
        font-size: 22px;
        text-align: center;
        line-height: 70px;
      }

      .chat {
        flex: 1;
      }

      .bottom {
        height: 100px;
        width: 90%;
        margin:auto;
      }
    }
  }


}

</style>